<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> 
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>IOTR</title> 

        <style type="text/css"> 

            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
        </style> 

    </h:head> 
    <h:body>                 
        <ez:OutletManagerIOTRHeaderMenu/>

        <ez:OutletManagerIOTRTitle/>

        <ez:OutletManagerIOTRMenu/>

        <p:layout style="table-layout:auto; height:600px ">
            <p:layoutUnit position="left" header="Navigation" width="300">
                <ez:OutletManagerIOTRRMMenu/>
            </p:layoutUnit>
            <p:layoutUnit position="center" header="Settings">
                <p:tabView dynamic="true" cache="false">
                    <p:tab title="Upload Photos">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputText value="Choose and Upload Your Files. Files supported:.jpg,.png,.gif"/>
                            <h:form enctype="multipart/form-data" prependId="false">
                                <p:growl id="growl2" showDetail="true" life="2000"></p:growl> 
                                <p:fileUpload fileUploadListener="#{photoManagedBean.handlePhotoUpload}" multiple="true" label="Select Files" allowTypes="*.jpg;*.png;*.gif;" description="Images" update="growl2,gallery"/>	
                            </h:form>

                        </h:panelGrid>
                    </p:tab>
                    <p:tab title="Manage Photos">
                        <h:panelGrid  columns="2" cellpadding="10">
                            <h:outputText value="Manage Photo" />
                            <h:form enctype="multipart/form-data" prependId="false">

                                <h:selectManyListbox id="photo"  value="#{photoManagedBean.photoIDCollection}" required="true">
                                    <f:selectItems value="#{photoManagedBean.retrievePhotoList()}"/>
                                </h:selectManyListbox>
                                <p:growl id="growl" showDetail="true" life="2000" ></p:growl>
                                <p:commandButton value="View File" action="#{photoManagedBean.getSinglePhoto()}"  update="popImage" oncomplete="dlg2.show()"/>  
                                <p:commandButton value="Delete File" action ="#{photoManagedBean.deletePhoto()}" update="growl,photo,popImage,gallery"/>  
                                <p:commandButton value ="show" action="#{photoManagedBean.getSinglePhoto()}" update="pic"/>
                            </h:form>
                        </h:panelGrid>
                    </p:tab>

                </p:tabView>
                 <p:graphicImage id="pic" value="#{photoManagedBean.photoURLToShow}" height="300"
                  width="300"/>
            </p:layoutUnit>
        </p:layout>
        <p:dialog header="View Photo" widgetVar="dlg2" modal="true" height="600"
                  width="900" >  
            <h:outputText value="#{photoManagedBean.photoURLToShow}"/>
            <p:graphicImage id="popImage" value="#{photoManagedBean.photoURLToShow}"/>
        </p:dialog>  

    </h:body> 
</html>